/* eslint-disable prettier/prettier */
import React, {useCallback, useEffect, useState } from 'react';
import {ImageBackground, StatusBar,TouchableOpacity,View,Image } from 'react-native';
import styles from './styles';
import TyperWriter from './TyperWrite';
import  Soundplay from './soundplay';
import { GetjsonText, Getjsonwords } from '../../services/getJsonData';


const Warm = ({route,navigation}) => {
const [b,setB] = useState<number>(1);
const [a,setA] = useState<String>('文本加载出错，请重试');
const [isPlaying,setIsPlaying] = useState<Boolean>(true);
const [rs,setRs] = useState<String>('level1_story1');
const [bgc,setBgc] = useState<String>('asset:/level1_story_background.jpg');
const [sector,setSector] = useState<String>('unit0');
const [ye,setYe] = useState<number>(1);
const [strc,setStrc] = useState<String>('');
const init = () => {
  const {unit,page,strc} = route.params;
  setStrc(strc);
  setSector(unit);
  setB(1);
  setIsPlaying(true);
  console.log('init' + strc);
}
const setText = async (num:Number,strc:String) => {
  let m = '';
  switch (strc) {
    case 'learn':
        m = await GetjsonText('level' + num + '_story' + ye);
      break;
    case 'practise':
      m = await GetjsonText('level' + num + '_practice');
      break;
    case 'adventure':
      m = await GetjsonText('adventure_story' + num);
      break;
    default:
      break; 
}
console.log(m);
  setA(m);
  console.log('-----------------------------' + a);
};
useEffect(() => {
 init();
}, [route]);
useEffect( () => {
  if (b <= 2){
     
    let level = `${sector}`;
    let num = Number(level.slice(-1)) + 1;
    switch (strc) {
      case 'learn':
        setRs('level' + num + '_story' + ye);
        setBgc('asset:/story/level' + num + '_story_background.jpg');
       setText(num,'learn');
        console.log(rs + strc);
        break;
      case 'practise':
        setRs('level' + num + '_story3');
        setBgc('asset:/polt/level' + num + '_story3.jpg');
        setText(num,'practise');
        console.log('asset:/practice/practice' + num + '_background.jpg');
        break;
      case 'adventure':
        setRs('adventure_story' + num);
        setBgc('asset:/adventure/adventure' + num + '_story.jpg');
        setText(num,'adventure');
        console.log('asset:/adventure/adventure' + num + '_story.jpg');
        break;
      default:
        break; 
  }
   } else if (ye === 2 || strc !== 'learn') { 
    console.log(strc + '=====');
    console.log('跳转条件达成');
    setIsPlaying(false);
    setB(1);
        navigation.navigate(strc,{unit: sector});
         
  } else if (ye === 1 && strc === 'learn'){ 
    console.log('next===================page;')
    setB(1);
    setYe(2);
    setIsPlaying(true);
  }

}, [b,ye,sector,strc,route]);
//音频文件：raw文件夹下
// learn => level `${unit.}` _story`${page}`
// practise => level `${unit.}` _study`${page}`
//adventure => adventure_story`${unit.}`
//背景图片: assets文件夹下
//learn => level `${unit.}` _story_background.jpg
 // learn =>learn_background`${unit.}`.jpg不是warm的职责
// practise => practise`${unit.}`_background.jpg
//adventure => adventure`${unit.}`_story`${page}`。jpg

   const handleSkip = () => {

      const {unit} = route.params;
      console.log(unit + '===============================================');
      if (b <= 2){
     setIsPlaying(false);}
     setB(b + 1);

  };

    return (
      <ImageBackground
        resizeMode="stretch"
        style={styles.constiner}
        source={{uri: `${bgc}`}}
      >
       <StatusBar 
          hidden={false}
          backgroundColor="black"
          barStyle={ 'light-content'}
        />
        <TouchableOpacity
        style={{position:'absolute',width:150,height:100,justifyContent:'center',top:20,right:10}}
        onPress={handleSkip}
      >
        <Image source={require('../../src/image/UI/jump_polt.png')} style={{width:150,height:100 }} />
      </TouchableOpacity> 
        <View style={styles.View} >
           <TyperWriter  isPlaying={isPlaying} text={a}   />
           <Soundplay text={rs} isPlaying={isPlaying} />
        </View>
      </ImageBackground>
    );
}

export default Warm;